<template>
<div class="city_container">
  <head-top :head-title="cityname" :go-back="true">
    <!--把名字为slot的剿内容插入到head-top事先定义好的剿空间内，这样的插条就可以显示出来了-->
    <router-link to="/home" slot="changecity" class="change_city">切换城市</router-link>
  </head-top>
  <section class="form-warpper">
    <yd-cell-group>
      <yd-cell-item>
        <yd-input slot="right" required v-model="address" max="30" placeholder="输入学校、商务楼、地址"></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <div class="btn" @click.stop="submit">
        <yd-button size="large" type="primary">提交</yd-button>
    </div>
  </section>
  <section class="history">
    <header v-if="historytitle" class="pois_search_history">搜索历史</header>
    <ul class="getpois_ul">
      <li v-for="(item, index) in placelist" @click.stop="nextpage(index,item.geohash)" :key="index">
        <h4 class="pois_name ellipsis">{{item.name}}</h4>
        <p class="pois_address ellipsis">{{item.address}}</p>
      </li>
    </ul>
    <footer v-if="historytitle&&placelist.length" class="clear_all_history" @click.stop="clearAll">清空所有</footer>
    <div class="search_none_place" v-if="placelist.length===0">很抱歉！暂时无搜索结果</div>
  </section>
</div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'src/components/header/head'
  import {currentcity, searchplace} from 'src/service/getData'
  import {getStore, setStore, removeStore} from 'src/config/mUtils'
  export default {
  data(){
    return{
      cityname:'',
      historytitle:true,
      address:'',
      placeHistory:[], // 历史搜索记录
      placelist:[]
    }
   },
   created(){
   },
   mounted(){
     //https://router.vuejs.org/zh-cn/advanced/meta.html
     //$route一个路由匹配到的所有路由记录会暴露为 $route 对象（还有在导航守卫中的路有对象）的 $route.matched 数组。
     this.cityid = this.$route.params.cityid;
     currentcity(this.cityid).then(res=>{
       this.cityname = res.name;
     })
     this.searcheHistory();
   },
   computed: {
   },
   methods: {
     nextpage(index,geohash){
       let history = getStore('placeHistory');
       let selectItem = this.placelist[index];
       if(history){
         let checkReapeate = false;
         //把json字符串转为json对象，遍历之
         this.placeHistory = JSON.parse(history);
         this.placeHistory.forEach(item =>{
              if(item.geohash === geohash){
                checkReapeate = true;
                //跳出循环
                return false;
              }
         })
         // 假如没有重复
         if(!checkReapeate){
           this.placeHistory.push(selectItem)
         }
       }else{
         this.placeHistory.push(selectItem)
       }
       setStore('placeHistory',this.placeHistory)
       this.$router.push({path:'/msite', query:{geohash}});
     },
     clearAll(){
       this.$dialog.alert({mes:'已清空'});
       removeStore('placeHistory');
       this.searcheHistory();
     },
     submit(){
       if(this.address){
         searchplace(this.cityid, this.address).then((res)=>{
           this.placelist = res;
           this.placeNone = res.length ? false : true;
         })
       }
     },
     searcheHistory(){
       if(getStore('placeHistory')){
         // 需要把json字符串，转为json对象
         this.placelist = JSON.parse(getStore('placeHistory'));
       }else{
         this.placelist = [];
       }
     }
   },
   components:{
     headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../style/mixin';
.form-warpper{
  background-color: $fc;
  padding:0.5rem;
  margin-top: 2.5rem;
}
  .change_city{
    right: 0.4rem;
    @include sc(0.6rem, #fff);
    @include ct;
  }
  .pois_search_history{
    border-top: 1px solid $bc;
    padding-left: 0.5rem;
    height: 2rem;
    line-height: 2rem;
  }
  .getpois_ul{
    background-color: #fff;
    border-top: 1px solid $bc;
    li{
      margin: 0 auto;
      padding-top: 0.65rem;
      border-bottom: 1px solid $bc;
      .pois_name{
        margin: 0 auto 0.35rem;
        width: 90%;
        @include sc(0.65rem, #333);
      }
      .pois_address{
        width: 90%;
        margin: 0 auto 0.55rem;
        @include sc(0.45rem, #999);
      }
    }
  }
  .search_none_place{
    margin: 0 auto;
    @include font(0.65rem, 1.75rem);
    color: #333;
    background-color: #fff;
    text-indent: 0.5rem;
  }
  .clear_all_history{
    @include sc(0.7rem, #666);
    text-align: center;
    line-height: 2rem;
    background-color: #fff;
  }
</style>
